vue 语法
模板语法<!-- 文本 使用 {{...}} --><div > <p>{{ message }}</p></div><!-- 使用 v-html 指令用于输出 html 代码： --><div > <div v-html="message"></div></div><!-- HTML 属性中的值应使用 v-bind 指令 --><div > <div v-bind:class="{'class1': use}"> v-bind:class 指令 </div></div><!-- Vue....
2024-01-10
vue 入门
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue.js入门</title> </head> <script src="js/vue.js"></script> <body> <div class="box"> {{title}}<br> <!--双向数据绑定--> <input type="text...
2024-01-10
vue 01
1.有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box { height:100px; width:100px; } </style></head><body><div...
2024-01-10
vue 动画
点击按钮 文字 向左右飘动 显示隐藏<template> <div > <button @click="flag= !flag">按钮</button> <transition> <div v-show="this.flag">我要动起来</div> </transition> </div></template><script>export default { data() { return { flag: true }; }};</script>...
2024-01-10
vue 编辑
点击文字修改<div class="baseInfo"> <p class="title">基本信息</p> <p class="el-icon-folder-checked" @click="saveElement()" :plain="true">保存</p></div><div class="order_info" v-for="item in orderData" @click="ShowElement($event)"> <p><span>用户名：</span><span class=...
2024-01-10
vue引入d3
单页面使用cnpm install d3 --save-dev指定版本安装cnpm install d3@6.3.1 -S<script> import * as d3 from 'd3'export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { testD3(){ let test1 = d3.select...
2024-01-10
vue 修饰符
修饰符，对于一个程序员来说并不陌生，现在让我们一起来收集一些我们常用的一些修饰符吧！记住这些修饰符，并且用起来，保证可以让你在开发项目中节省更多时间，写代码过程中更加方便。表单修饰符在我们 在我们通常写登录页面，或者关于 input 框 文本框的时候，就该用到的双...
2024-01-10
vue 葵花宝典
vue2.js 下载地址：https://unpkg.com/vue@2.2.1/dist/vue.jsvue-router.js 下载地址：https://unpkg.com/vue-router@3.5.3/dist/vue-router.js es6：https://es6.ruanyifeng.com/#docs/let 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ti...
2024-01-10
vue 表单操作
<form class="mian__form" @submit.prevent="submit"> <ul> <li> <div class="form__til">企业名称</div> <div class="form__inp...
2024-01-10
vue 入门小结
Vue.js 是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层。1、引入方式：直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 初学者可以使用script标签 的方式引入，开发的时候是不使用的。最好在</head>之前引入，为了防止出现抖屏...
2024-01-10
vue 国际化二
参考：http://kazupon.github.io/vue-i18n/zh/introduction.htmlnpm install vue-i18n 在main.ts中//多语言切换import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { 'zh': require('./assets/lang/zh'), ...
2024-01-10
vue 快速开发
1，父组件直接传参，给子组件webpack 相关vue 单文件<template> </template><script> </script><style scoped> </style> webpack 使用vue vue-router 的使用...
2024-01-10
vue 报错总结
关闭vue-cli 默认eslint规则：找到 build -> webpack.base.config.js ，删除箭头指向代码1、Newline required at end of file but not found 翻译：文件末尾需要换行符，但找不到。末尾要空一行 ...
2024-01-10
vue 顶部导航
<template> <div class="app"> <div id="NavSlide"> <nav> <img src="../assets/img/logo.png"/> <p @click="toggle()...
2024-01-10
vue 分页手写
<template> <div > <nav-con ></nav-con> <div class="container" :class="{'container-ipx': ipx,'container-iphone': iphone}" > <ul class="list" ref="list"> <li v-for="(i,index) in list" :key="index"> ...
2024-01-10
vue 错误拦截
//系统错误捕获const errorHandler = (error, vm) => { console.error('抛出全局异常'); request({ method: 'post', url: 'api/index/errorLogCollect', data: { k: getCookie("k"), time: new Date().getTime(), userip: returnCitySN["cip"], error: JSO...
2024-01-10
vue ssr渲染(3)
搭建dev环境更改package.json 更改dev.js，先创建一个html放到webpack输出目录下，npm run dev，浏览器打开http://localhost:8080，就可正常访问了， 控制台输出 ：main.js:1 hello 我是app解决index.html的问题，html-webpack-pluginnpm i html-webpack-plugin -D更改index.html文件，因为html-webpack-plugin开启了inject下一章，集成vue ...
2024-01-10
vue 表单问题。
<template> <form> <span v-for="item in list"> <input type="text" :value="'U' + item"> <button @click="list++"></button> </span> <button @click="getArray()">Upnow</button>...
2024-02-13
vue 基础（一）
VUE一. 开发工具VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下：Vetur —— 语法高亮、智能感知、Emmet等EsLint—— 语法纠错Auto Close Tag —— 自动闭合HTML/XML标签Auto Rename Tag —— 自动完成另一侧标签的同步修改Path Intellisense —— 自动路劲补全HTML CSS Support —...
2024-01-10
vue —— 监听
vue的监听用途很大比如：通过数据的值的变化，执行某个方法首先：data中要有个变量初始值finalTotalAmount的初始值是0我们想当finalTotalAmount值发生变化时，执行函数getAmount 获取最新的数据 即可以在watch中，监听data中amountResp.finalTotalAmount的值监听数据的方法中，参数val是监听对象的最新值，oldval是...
2024-01-10
vue 实现分页
1 新建 pager.js 文件/** * [pagination 分页组件] * @param {Number} total [数据总条数] * @param {Number} display [每页显示条数 default:10] * @param {Number} current [当前页码 default:1] * @param {Number} pagegroup [分页条数(奇数) default:5] * @param {Event} page...
2024-01-10
vue样式绑定 切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中样式绑定</title> </head> <body> <div id="app"> <div @click="handleDivClick" :class="{activa...
2024-01-10
vue 左右滑动效果
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架，与其它大型框架不同的是：vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上...
2024-01-10
vue 图片滑动登录
前言 最近在研究图片滑动解锁 登录，说是要用阿里的那个验证，但是还是想自己手写下这个Demo 效果图是这样的： 本来是想用canvas 来实现的，但是类，后来还想用css 和图片来代替canvas其实思路就这样的： 那个缺陷的滑块位置 是随机的 根据 图片的宽高 产生 随机 数当然是定位 ： left...
2024-01-10
vue 请求图片方法
node的每一个文件，都是一个域，那么里面所有的变量都不允许被外界引用，除非导出。要使用外界的变量，也必须使用导入的方式来导入。import 文件路径。css可以直接使用import +文件路径导入通用导入：import name form “文件路径”导入图片的方式：require（‘图片地址’）变量导出：export default 变量...
2024-01-10
